<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title id="PageTitle"></title>
    <script>
      var width = document.documentElement.clientWidth;
      var scale = width / 375;
      var css = 'html{font-size:' +
        37.5 * scale +
        'px;}';
      document.write('<style>' + css + '</style>');
    </script>
        <script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.js"></script>
</head>
<body>
<div id="app" v-cloak>
    <music :music="BgMusic"></music>
    <func-banner :mananger='true'></func-banner>
    <div class="container">
        <form name="form">
            <header>
                <div class="banner_img">
                    <img class="bg_title_banner" :src="BannerStr">
                </div>
                <div class="both"></div>
                <div class="activity_slogan">
                    <div class="both"></div>
                    <h1 id="title">{{Title}}</h1>
                </div>
            </header>
            <main>
                <div class="w">
                    <div class="join_activity">
                        <div class="price_des">
                            <div class="c_price"
                                 v-if="partinstatus==partinstatusall.ParterLook || partinstatus==partinstatusall.ParterDone || partinstatus==partinstatusall.JoinDone">
                                <p>
                                    <span>{{JoinerMsg.Name}}</span>
                                </p>
                                <p>现价
                                    <span class="current_price">{{JoinerMsg.NowPrice / 100}}</span>元</p>
                            </div>
                            <div class="price_des">
                                <p>原价
                                    <span>{{Prizes.Priprice / 100}}</span>元</p>
                                <p>底价
                                    <span>{{Prizes.LatPrice / 100}}</span>元</p>
                                <!-- 存在手机号码则有当前排名 -->
                            </div>
                            <div class="c_price_rank"
                                 v-if="partinstatus==partinstatusall.ParterLook || partinstatus==partinstatusall.ParterDone || partinstatus==partinstatusall.JoinDone">
                                <p>当前排名
                                    <span>{{JoinerMsg.RankMsg}}</span>
                                </p>
                                <p>帮砍人数
                                    <span>{{JoinerMsg.Partner}}</span>
                                </p>
                            </div>
                        </div>
                        <div class="activity_status" v-if="partinstatus==partinstatusall.JoinJustNow">
                            <div class="first_want_join join" v-on:click="AlertJoinPop">我要参加</div>
                        </div>
                        <div class="activity_status" v-if="partinstatus==partinstatusall.JoinDone">
                            <div class="look_for_friend sendfriend" v-on:click="SendFriend">马上找朋友帮我减价</div>
                        </div>
                        <div class="activity_status" v-if="partinstatus==partinstatusall.ParterLook">
                            <div class="help_cut helpcut" v-on:click="TakePartIn">帮TA减价</div>
                            <div class="want_join join" v-on:click="AlertJoinPop">我要参加</div>
                        </div>
                        <div class="activity_status" v-if="partinstatus==partinstatusall.ParterDone">
                            <div class="help_cut helpcut" v-on:click="TakePartIn">帮TA减价</div>
                            <div class="return_mine" v-on:click="BackMine">返回我的</div>
                        </div>
                        <div class="activity_status" v-if="partinstatus==partinstatusall.AtActInActiveStart">
                            <div class="first_want_join">活动尚未开始，请先收藏</div>
                        </div>
                        <div class="activity_status" v-if="partinstatus==partinstatusall.AtActInActiveEnd">
                            <div class="first_want_join">活动已结束,下次趁早哦</div>
                        </div>
                        <div class="cut_price_msg">
                            <p>
                                <span class="customer_price_msg"></span>
                            </p>
                        </div>
                    </div>
                    <div class="join_activity_ladder">
                        <div></div>
                        <div></div>
                    </div>
                    <div class="activity_countdown">
                        <p v-if="partinstatus != partinstatusall.AtActInActiveEnd">活动时间
                            <span class="end_word">结束</span>倒计时:
                            <span class="dynamic_time">
                                    <span>{{countDown.days}}</span>天
                                    <span>{{countDown.hours}}</span>时
                                    <span>{{countDown.minutes}}</span>分
                                    <span>{{countDown.seconds}}</span>秒</span>
                        </p>
                        <p v-if="partinstatus == partinstatusall.AtActInActiveEnd">活动已结束</p>
                    </div>
                    <div class="activity">
                        <p class="prize-num" v-if="Prizes.PrizesNum">本次奖品份数<span>{{Prizes.PrizesNum}}</span>份,剩余<span>{{Prizes.PrizesNum - Prizes.LastNum}}</span>份</p>
                        <read-section :sedata="Content"></read-section>
                    </div>
                    <div class="activity_des" id="rank">
                        <div class="activity_des_title">
                            <h2>排行榜</h2>
                        </div>
                        <div class="activity_des_content">
                            <div class="phb">
                                <div class="bmb">
                                    <table>
                                        <tr>
                                            <th>排名</th>
                                            <th>姓名</th>
                                            <th>当前价格</th>
                                        </tr>
                                        <tr v-for="(item ,index) in RankMsg">
                                            <td>{{index + 1}}</td>
                                            <td>{{item.Name}}</td>
                                            <td>{{item.NowPrice/100}}元</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                        </div>
                        <div class="load">数据加载中,请稍后</div>
                    </div>
                    <div class="both"></div>
                    <div class="both"></div>
                    <div class="both"></div>
                </div>
            </main>
        </form>
    </div>
    <div class="both"></div>
    <div class="both"></div>
    <div class="both"></div>
    <!-- 背景 -->

    <!-- 分享标题以及副标题处弹窗 -->
    <share-pop :sharemsg="ShareMsg"></share-pop>

    <!-- 报名成功以及提示商家分享方法 -->

    <notice-pop :actstatus="ActStatus"></notice-pop>

    <!-- 砍价成功通知 -->
    <div class="cut_suc_notify">
        <div class="cut_circle_bg">
            <img src="../../../img/activity/cut_price/base_cut/element_popup_light@2x.png" alt="">
        </div>
        <div class="cut_circle">
            <img src="../../../img/activity/cut_price/base_cut/bg_popup_cutprice@2x.png" alt="">
        </div>
        <div class="cut_detail_message">
            <p>恭喜您成功砍掉了</p>
            <div>18.62元</div>
            <p>赶快告诉TA</p>
        </div>
    </div>
    <!-- 菜刀 -->
    <div class="start_knife">
        <img src="../../../img/activity/cut_price/base_cut/knife.png" alt="">
    </div>
    <!-- 一开始的○-->
    <div class="start_circle"></div>
    <!-- 报名弹窗 -->
    <user-join :othermsg="Other" v-on:join="UserJoinAct" v-on:back="BackMine"></user-join>
    <add-msg :mobile="Mobile"></add-msg>
</div>
</body>

</html>